 <%@ Page Title="Stubby Checkout" Language="C#" MasterPageFile="~/Web Pages/Site.Master" 
    AutoEventWireup="true" CodeBehind="Checkout.aspx.cs" Inherits="CS490_Capstone___Stubby.Page.Checkout" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <asp:Panel ID="content" CssClass="content" runat="server">
        <asp:Panel ID="topSpacer" runat="server"></asp:Panel>
        <asp:Panel ID="output" CssClass="output" runat="server" Visible="True">
            <h3>Stubby Checkout:</h3>

            <asp:Panel ID="step1" runat="server" Visible="true">
                
                            
                        <td class="bottom rightNotSmall">
                            <asp:Button ID="FinishStep1" runat="server" Text="Proceed" 
                                onclick="FinishStep1_Click" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>

            <asp:Panel ID="step2" runat="server" Visible="false">
                <asp:Panel ID="nonMemberInfo" runat="server">
                    <h5>Payment Information</h5>
                    <h5 class="flag">Highlighted Fields Required</h5>
                    <asp:Table ID="buyerInfo" CssClass="inputs" runat="server">
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Name: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="firstName" runat="server" Text="First" 
                                    CssClass="leftInput" BackColor="#FEF201"></asp:TextBox>              
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="lastName" runat="server" Text="Last" 
                                    CssClass="rightInput" BackColor="#FEF201"></asp:TextBox>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Address: </span>
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                                <asp:TextBox ID="address1" runat="server" Text="Address Line 1" 
                                    CssClass="addressInput" BackColor="#FEF201"></asp:TextBox>              
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                &nbsp;
                            </asp:TableCell>
                            <asp:TableCell  ColumnSpan="2" CssClass="padded">
                                <asp:TextBox ID="address2" runat="server" Text="Address Line 2" 
                                    CssClass="addressInput"></asp:TextBox>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                &nbsp;
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                                <asp:TextBox ID="city" runat="server" Text="City" CssClass="cityInput" 
                                    BackColor="#FEF201"></asp:TextBox>
                                <asp:DropDownList ID="state" runat="server" CssClass="stateInput" 
                                    BackColor="#FEF201">
                                    <asp:ListItem>State</asp:ListItem>
                                    <asp:ListItem>AK</asp:ListItem>
                                    <asp:ListItem>AL</asp:ListItem>
                                    <asp:ListItem>AR</asp:ListItem>
                                    <asp:ListItem>AZ</asp:ListItem>
                                    <asp:ListItem>CA</asp:ListItem>
                                    <asp:ListItem>CO</asp:ListItem>
                                    <asp:ListItem>CT</asp:ListItem>
                                    <asp:ListItem>DC</asp:ListItem>
                                    <asp:ListItem>DE</asp:ListItem>
                                    <asp:ListItem>FL</asp:ListItem>
                                    <asp:ListItem>GA</asp:ListItem>
                                    <asp:ListItem>HI</asp:ListItem>
                                    <asp:ListItem>IA</asp:ListItem>
                                    <asp:ListItem>ID</asp:ListItem>
                                    <asp:ListItem>IL</asp:ListItem>
                                    <asp:ListItem>IN</asp:ListItem>
                                    <asp:ListItem>KS</asp:ListItem>
                                    <asp:ListItem>KY</asp:ListItem>
                                    <asp:ListItem>LA</asp:ListItem>
                                    <asp:ListItem>MA</asp:ListItem>
                                    <asp:ListItem>MD</asp:ListItem>
                                    <asp:ListItem>ME</asp:ListItem>
                                    <asp:ListItem>MI</asp:ListItem>
                                    <asp:ListItem>MN</asp:ListItem>
                                    <asp:ListItem>MO</asp:ListItem>
                                    <asp:ListItem>MS</asp:ListItem>
                                    <asp:ListItem>MT</asp:ListItem>
                                    <asp:ListItem>NC</asp:ListItem>
                                    <asp:ListItem>ND</asp:ListItem>
                                    <asp:ListItem>NE</asp:ListItem>
                                    <asp:ListItem>NH</asp:ListItem>
                                    <asp:ListItem>NJ</asp:ListItem>
                                    <asp:ListItem>NM</asp:ListItem>
                                    <asp:ListItem>NV</asp:ListItem>
                                    <asp:ListItem>NY</asp:ListItem>
                                    <asp:ListItem>OH</asp:ListItem>
                                    <asp:ListItem>OK</asp:ListItem>
                                    <asp:ListItem>OR</asp:ListItem>
                                    <asp:ListItem>PA</asp:ListItem>
                                    <asp:ListItem>RI</asp:ListItem>
                                    <asp:ListItem>SC</asp:ListItem>
                                    <asp:ListItem>SD</asp:ListItem>
                                    <asp:ListItem>TN</asp:ListItem>
                                    <asp:ListItem>TX</asp:ListItem>
                                    <asp:ListItem>UT</asp:ListItem>
                                    <asp:ListItem>VA</asp:ListItem>
                                    <asp:ListItem>VT</asp:ListItem>
                                    <asp:ListItem>WA</asp:ListItem>
                                    <asp:ListItem>WI</asp:ListItem>
                                    <asp:ListItem>WV</asp:ListItem>
                                    <asp:ListItem>WY</asp:ListItem>
                                </asp:DropDownList>
                                <asp:TextBox ID="zipCode" runat="server" Text="ZIP" CssClass="zipInput" 
                                    BackColor="#FEF201"></asp:TextBox>           
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Email: </span>
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                                <asp:TextBox ID="email" runat="server" Text="Email Address" 
                                    CssClass="addressInput" BackColor="#FEF201"></asp:TextBox>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Age: </span>
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                                <asp:TextBox ID="age" runat="server" Text="" CssClass="ageInput">
                                </asp:TextBox>
                                <asp:CheckBox ID="studentStatus" runat="server" CssClass="checkBox" />
                                <span class="checkText">I am a student</span>
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:Panel>
                <asp:Panel ID="paymentOptions" runat="server">
                    <asp:Table ID="paymentTable" CssClass="inputs" runat="server">
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall list top">
                                <span>Payment Method: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:RadioButtonList ID="paymentRadios" runat="server">
                                    <asp:ListItem> PayPal</asp:ListItem>
                                    <asp:ListItem> Credit Card</asp:ListItem>
                                </asp:RadioButtonList>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall list top">
                                <span>Delivery Method: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:RadioButtonList ID="deliveryRadios" runat="server">
                                    <asp:ListItem> Mail my tickets to me</asp:ListItem>
                                    <asp:ListItem> I will pick up my tickets at the venue</asp:ListItem>
                                </asp:RadioButtonList>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell ColumnSpan="2" CssClass="rightNotSmall bottom">
                                <asp:Button ID="finishStep2" runat="server" Text="Proceed" 
                                    onclick="finishStep2_Click" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="help" ColumnSpan="2">
                                <a onclick="getHelp(getMessage(2))">HELP&nbsp;</a>
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:Panel>
            </asp:Panel>

            <asp:Panel ID="step3" runat="server" Visible="false">
                <h5>Payment Information</h5>
                <h5 class="flag">All fields required</h5>
                <asp:Panel ID="payPal" runat="server" Visible="false">
                    <asp:Table ID="payPalTable" CssClass="inputs" runat="server">
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>PayPal User Name: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="payPalUserName" runat="server" CssClass="leftInput" 
                                    BackColor="#FEF201"></asp:TextBox>              
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>PayPal Password: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="payPalPassword" runat="server" TextMode="password" 
                                    CssClass="leftInput" BackColor="#FEF201"></asp:TextBox>              
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                &nbsp;
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                               <asp:CheckBox ID="authorizePayPal" runat="server" CssClass="checkBox" />
                               <span class="checkText">I authorize Stubby to charge my PayPal account</span> 
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell ColumnSpan="2" CssClass="bottom rightNotSmall">
                                <asp:Button ID="payPalProceed" runat="server" Text="Proceed" Visible="true" 
                                    onclick="payPalProceed_Click" />
                                <div ID="payPalCheckout" runat="server" Visible="false"></div>
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:Panel>
                <asp:Panel ID="creditCard" runat="server" Visible="false">
                    <asp:Table ID="creditCardTable" CssClass="inputs" runat="server">
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Credit Card Number: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="creditCardNumber" runat="server" CssClass="leftInput" 
                                    BackColor="#FEF201"></asp:TextBox>              
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Security Code: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:TextBox ID="creditCardSecurityCode" runat="server" 
                                    CssClass="leftInput zipInput" BackColor="#FEF201"></asp:TextBox>     
                                <span class="help">
                                    <a onclick="getHelp(getMessage(0));">WHAT'S THIS?</a>
                                </span>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="rightNotSmall padded list">
                                <span>Expiration Date: </span>
                            </asp:TableCell>
                            <asp:TableCell CssClass="padded">
                                <asp:DropDownList ID="expirationMonth" runat="server" CssClass="stateInput" 
                                    BackColor="#FEF201">
                                    <asp:ListItem>Month</asp:ListItem>
                                    <asp:ListItem>01</asp:ListItem>
                                    <asp:ListItem>02</asp:ListItem>
                                    <asp:ListItem>03</asp:ListItem>
                                    <asp:ListItem>04</asp:ListItem>
                                    <asp:ListItem>05</asp:ListItem>
                                    <asp:ListItem>06</asp:ListItem>
                                    <asp:ListItem>07</asp:ListItem>
                                    <asp:ListItem>08</asp:ListItem>
                                    <asp:ListItem>09</asp:ListItem>
                                    <asp:ListItem>10</asp:ListItem>
                                    <asp:ListItem>11</asp:ListItem>
                                    <asp:ListItem>12</asp:ListItem>
                                </asp:DropDownList>
                                <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                                <asp:DropDownList ID="expirationYear" runat="server" CssClass="zipInput" 
                                    BackColor="#FEF201">
                                    <asp:ListItem>Year</asp:ListItem>
                                    <asp:ListItem>2012</asp:ListItem>
                                    <asp:ListItem>2013</asp:ListItem>
                                    <asp:ListItem>2014</asp:ListItem>
                                    <asp:ListItem>2015</asp:ListItem>
                                    <asp:ListItem>2016</asp:ListItem>
                                    <asp:ListItem>2017</asp:ListItem>
                                    <asp:ListItem>2018</asp:ListItem>
                                    <asp:ListItem>2019</asp:ListItem>
                                    <asp:ListItem>2020</asp:ListItem>
                                    <asp:ListItem>2021</asp:ListItem>
                                </asp:DropDownList>          
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                        <asp:TableCell CssClass="rightNotSmall padded list">
                                &nbsp;
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="2" CssClass="padded">
                                <asp:CheckBox ID="authorizeCreditCard" runat="server" CssClass="checkBox" />
                                <span class="checkText">I authorize Stubby to charge my credit card</span>
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell ColumnSpan="2" CssClass="bottom rightNotSmall">
                                <asp:Button ID="creditCardSubmit" runat="server" Text="Pay Now" 
                                    onclick="creditCardSubmit_Click" />
                            </asp:TableCell>
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="help" ColumnSpan="2">
                                <a onclick="getHelp(getMessage(2))">HELP&nbsp;</a>
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </asp:Panel>
            </asp:Panel>

        </asp:Panel>
    </asp:Panel>

</asp:Content>
